<template>
  <cu-layout title="提交订单">
    <view class="p-10" @click="goAddress">
      <view class="cu-card">
        <view class="flex-a ">
          <view class="iconfont icon-zuobiao text-20 text-primary" />
          <view class="flex-1 px-10">
            <view v-if="state.delivery" class="">
              <view class="flex-a">
                <view v-if="state.delivery.is_def" class="tag">
                  默认
                </view>
                <view class="text-15 ">
                  {{ state.delivery.name }} {{ state.delivery.phone }}
                </view>
              </view>
              <view class="text-13 text-content mt-4">
                {{ `${state.delivery.province_name} ${state.delivery.city_name} ${state.delivery.district_name}` }} {{ state.delivery.address }}
              </view>
            </view>
            <view v-else class="text-16 text-tips">点击选择收货地址</view>
          </view>
          <view class="iconfont icon-xiangyou1 text-tips text-14" />
        </view>
      </view>
      <view class="cu-card">
        <view class="flex-ba py-5">
          <view class="text-16">商品清单</view>
          <view class="">
            <text class="">种类<text class="text-primary font-600 ml-3">1</text></text>
            <text class="ml-10">数量<text class="text-primary font-600 ml-3">1</text></text>
          </view>
        </view>
        <view class="">
          <view class="py-12 ">
            <view class="flex">
              <view class="flex-shrink rounded-4 overflow-hidden hair-s bg-fa">
                <image class="block" :style="$.utils.getSize(80)" :src="info.img" mode="" />
              </view>
              <view class="flex-1 flex-vb ml-10">
                <view class="">
                  <view class="ellipsis-2 text-15">{{ info.name }}</view>
                </view>
                <view class="flex-b">
                  <cu-price class="text-primary" :value="info.price" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="cu-card">
        <view class="">
          <view class="text-16 mb-12">备注</view>
          <view class="cu-textarea">
            <textarea v-model="state.remark" style="width: 100%; height: 80px;" placeholder="请输入备注 (非必填)" maxlength="500" />
          </view>
        </view>
      </view>
    </view>

    <view class="cu-footer ">
      <view class="cu-footer-fixed flex-ba px-20">
        <view class="flex-1 flex-a text-bold">
          <view class="text-16">合计：</view>
          <view class="text-red text-20">{{ info.price }}</view>
        </view>
        <view class="">
          <uv-button
            shape="circle"
            :loading="state.loading"
            :custom-text-style="{padding: '0 5px'}"
            text="提交订单"
            type="primary"
            :color="`linear-gradient(to right, ${$.color.primary}, ${$.color.primaryDark})`"
            @click="save"
          />
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import $ from '@/sheep'

const info = ref({})
const state = reactive({
  delivery: null,
  loading: false,
  remark: '',
  orderSn: 0
})

onLoad((options = {}) => {
  reload(options.id)
  getAddress()
})

function getAddress() {
  $.get('/user/addressList', {}).then(res => {
    if (res.data?.length) state.delivery = res.data[0]
  })
}

function reload(id) {
  $.get('/index/goodsDetail', { id }).then(res => {
    if (!res.success) {
      $.utils.showModal({
        title: '提示',
        content: res.msg,
        showCancel: false
      }).then(() => $.router.back())
      return false
    }
    res.data.img = Array.isArray(res.data.imgs) && res.data.imgs.length ? res.data.imgs[0] : $.defImg
    info.value = res.data
  })
}

async function pay() {
  const payRes = await $.post('/Order/pay', { order_id: state.orderSn })
}

async function save() {
  if (!state.delivery) {
    return $.utils.toast('请选择收货地址')
  }
  if (state.loading) return
  state.loading = true
  const payRes = await $.post('/user/goodsPay', {
    id: info.value.id,
    goods_num: 1,
    delivery_id: state.delivery.id,
    remark: state.remark,
    wx_id: uni.getStorageSync('wxId')
  })

  state.loading = false
  if (!payRes.success) {
    return $.utils.toast(payRes.msg)
  }

  $.utils.wxpay(payRes.data.pay_config).then(() => {
    $.utils.tips({ title: '支付成功' }, { tab: 5, url: '/pages/order/index' })
  }, (err) => {
    console.log(err)
    $.utils.toast('支付失败')
  })
}

function getAddressInfo(id) {
  $.get('/user/addressDetail', { id }).then(res => {
    if (res.success)
      state.delivery = res.data
  })
}

function goAddress() {
  if (state.orderSn) {
    return $.utils.toast('提交已订单, 无法修改地址')
  }
  const deliveryId = state.delivery ? state.delivery.id : 0
  $.router.go('/pages/user/address', { current: deliveryId, isSelect: 1 })
  uni.$once('selectAddress', function(data) {
    if (data.id) {
      getAddressInfo(data.id)
    } else {
      state.delivery = null
    }
  })
}

</script>

<style lang="scss">
.tag {
	background-color: $uv-primary;
	height: 36rpx;
	line-height: 36rpx;
	color: #fff;
	border-radius: 8rpx;
	font-size: 20rpx;
	padding: 0 10rpx;
	margin-right: 6rpx;
	text-align: center;
}
</style>
